<template>
	<view class="uni-fab-box">
		<uni-fab ref="fab" horizontal="right" vertical="bottom" @fabClick="addItemImageClick" :popMenu="false" />
		
		<uni-segmented-control :current="segemted_current" :values="['凭据图片', '实际图片']" style-type="text" active-color="#007aff" @clickItem="segmentedControlClick" /> 
		
		<view class="content">
			<view v-if="segemted_current === 0">
				<view v-if="!evidenceImageLists || evidenceImageLists.length === 0" class="uni-flex uni-row" 
					style="-webkit-justify-content: center;justify-content: center;">
					<view class="none-tip-text">暂无数据</view>
				</view>
				<view v-else class="uni-image-item" v-for="(value, index) in evidenceImageLists" :key="index">
					<image class="uni-image" mode="scaleToFill"
						:src="value.minImage"
						:data-src="value.fullImage"
						@tap="previewImage" ></image>
				</view>
			</view>
			<view v-if="segemted_current === 1">
				<view v-if="!actualImageLists || actualImageLists.length === 0" class="uni-flex uni-row" 
					style="-webkit-justify-content: center;justify-content: center;">
					<view class="none-tip-text">暂无数据</view>
				</view>
				<view v-else class="uni-image-item" v-for="(value, index) in actualImageLists" :key="index">
					<image class="uni-image" mode="scaleToFill"
						:src="value.minImage"
						:data-src="value.fullImage"
						@tap="previewImage" ></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getProjectItemImages } from '@/api/projectItemImage.js'
	import { projectItemInfoImgUrl, projectItemInfoMinImgUrl } from '@/utils/index.js'
	export default {
		onLoad(options){
			if(!options || !options.id) {
				uni.navigateBack({delta:1});
				return;
			}
			this.itemId = decodeURIComponent(options.id);
		},
		onShow() {
			this.getProjectItemImageLists();
		},
		onPullDownRefresh() {
			this.getProjectItemImageLists()
		},
		data() {
			return {
				segemted_current: 0,
				itemId: undefined,
				actualImageLists:[],
				evidenceImageLists: [],
				actualPreviewImageLists: [],
				evidencePreviewImageLists: []
			}
		},
		methods: {
			addItemImageClick(e){
				uni.navigateTo({
					url: "/pages/projectItemImageInfo/project_item_image_add?id="+ encodeURIComponent(this.itemId) + "&type=" + encodeURIComponent(this.segemted_current + 1)
				})
			},
			getProjectItemImageLists() {
				getProjectItemImages(this.itemId).then(resp => {
					this.actualImageLists = resp.datas.actualImages.map(x => 
					({ 
						fullImage: projectItemInfoImgUrl(x.imageUrl),
						minImage: projectItemInfoMinImgUrl(x.imageUrl)
					}));
					this.actualPreviewImageLists = resp.datas.actualImages.map(x => projectItemInfoImgUrl(x.imageUrl));
					this.evidenceImageLists = resp.datas.evidenceImages.map(x => 
					({ 
						fullImage: projectItemInfoImgUrl(x.imageUrl),
						minImage: projectItemInfoMinImgUrl(x.imageUrl)
					}));
					this.evidencePreviewImageLists = resp.datas.evidenceImages.map(x => projectItemInfoImgUrl(x.imageUrl));
					uni.stopPullDownRefresh();
				})
				.catch(error => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: error,
						icon: 'none',
						duration: 1000
					});
				});
			},			
			// 图片全屏查看
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.segemted_current == 1 ? this.actualPreviewImageLists : this.evidencePreviewImageLists
				})
			},
			segmentedControlClick(e) {
				if (this.segemted_current !== e.currentIndex) {
					this.segemted_current = e.currentIndex
				}
			}
		}
	}
</script>

<style>
	.uni-image-item {
		width: 300rpx;
		height: 300rpx;
		/* border:2rpx solid #D30000; */
		border-radius: 10rpx;
		display: inline-block;
		margin: 20rpx;
	}
	.uni-image {
		width: 300rpx;
		height: 300rpx;
	}
	
	.uni-media-list-logo {
		width: 180rpx;
		height: 140rpx;
	}
	
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 74rpx;
		font-size: 28rpx;
		overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>

